<template>
  <view>
    <view class="flex-tr">
      <view class="flex-td--label">气体分析</view>
      <view class="flex-auto">
        <view class="analyse-header">
          <view class="flex-auto">分析项目</view>
          <view class="analyse-td-item">合格标准</view>
          <view class="analyse-td-item">分析部位</view>
          <view class="flex-auto">分析数据</view>
          <view class="analyse-td-item">分析结果</view>
          <view class="analyse-td-item">分析时间</view>
          <view class="analyse-td-item">分析人</view>
        </view>
        <view v-for="(item, index) in analyseTableData" :key="index" class="analyse-body">
          <view class="flex-auto">{{ item.project || '/' }}</view>
          <view class="analyse-td-item">{{ item.eligibilityLabel || '/' }}</view>
          <view class="analyse-td-item">{{ item.content || '/' }}</view>
          <view class="flex-auto">
            <text v-if="item.analyticData">
              {{ item.analyticData }}{{ item.alarmDeviceCode ? '(' + item.alarmDeviceCode + ')' : '' }}
            </text>
            <text v-else>{{ '/' }}</text>
          </view>
          <view class="analyse-td-item">{{ item.analyticResultLabel || '/' }}</view>
          <view class="analyse-td-item">{{ item.datetime || '/' }}</view>
          <view class="analyse-td-item">
            <image
              v-if="item.signatureUrl"
              :src="`${staticUrl}${item.signatureUrl}`"
              mode="aspectFill"
              class="signature__img"
              @click="handlePreviewImage(`${staticUrl}${item.signatureUrl}`)"
            ></image>
            <span v-else>/</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { staticUrl } from '@/config'
import { getTicketAnalyse } from '@/api/spw/ticketApply'
import dayjs from 'dayjs'
export default {
  props: {
    ticketId: [Number, String]
  },
  data() {
    return {
      staticUrl,
      analyseTableData: []
    }
  },
  created() {
    getTicketAnalyse(this.ticketId).then(({ data }) => {
      const r = []
      data.reverse().forEach((item) => {
        const content = JSON.parse(item.analyseContent)
        let project = `${content.analyticTypeLabel}(${content.analyticTargetLabel})`
        let eligibilityLabel = ''
        if (Number(content.eligibilityCriteriaType) === 1) {
          eligibilityLabel = `高限${content.eligibilityCriteria}${content.unit}`
        }
        if (Number(content.eligibilityCriteriaType) === 2) {
          eligibilityLabel = `低限${content.eligibilityCriteria}${content.unit}`
        }
        if (Number(content.eligibilityCriteriaType) === 3) {
          eligibilityLabel = `范围值${content.eligibilityCriteria}${content.unit} ~ ${content.eligibilityCriteriaMax}${content.unit}`
        }
        if (content.analyticResult === '1') {
          r.push({
            ...content,
            project,
            eligibilityLabel,
            datetime: dayjs(item.createTime).format('MM.DD HH:mm:ss'),
            analyseId: item.analyseId,
            signatureUrl: item.signatureUrl
          })
        }
      })

      this.analyseTableData = r
    })
  },
  methods: {
    handlePreviewImage(url) {
      uni.previewImage({
        urls: [url]
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import './style.scss';
.analyse-header {
  background-color: #f1f1f1;
  border-bottom: 1px solid #124264;
  display: flex;
  text-align: center;

  > view {
    border-right: 1px solid #124264;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
  }
}
.analyse-body {
  display: flex;
  text-align: center;
  > view {
    border-right: 1px solid #124264;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
  }
}
.analyse-td-item {
  width: 110px;
}
</style>
